import React from "react";
import "@/views/dataBoard/style/style.less";
import _ from 'lodash'
import TheLineChart from "@/views/dataBoard/components/lineChart.jsx";
import store from "@/store/store"

class OnlineIncome extends React.Component {
  state = {
    lineXData: [],
    lineYData: [],
    legend: []
  }
  chart = React.createRef()
  componentDidUpdate(nextProps) {
    if (nextProps.data !== this.props.data) {
      this.getData()
    }
  }
  getData = async () => {
    let chartData = this.props.data
    let lineYData = []
    let lineXData = []
    let legend = []
    if (chartData && chartData.hasOwnProperty('eventTrendList') && Array.isArray(chartData.eventTrendList)) {
      chartData.eventTrendList.forEach((item, Index) => {
        legend.push(this.props.changeName ? this.props.changeName(item.name) : this.chooseName(item.name))
        item.name = this.props.changeName ? this.props.changeName(item.name) : this.chooseName(item.name);
        item.smooth = true;
        item.type = 'line';
      })
    }
    lineXData = chartData.dateList
    lineYData = chartData.eventTrendList
    this.setState({
      lineXData,
      lineYData,
      legend
    })

    let legendFlag = JSON.parse(localStorage.getItem(this.props.name))
    this.chart.current.set({
      lineXData,
      lineYData,
      legend,
      legendFlag
    })
  }
  theCache = (params) => {
    localStorage.setItem(this.props.name, JSON.stringify(params));
  }
  //上门服务-实时数据
  changeNameMhc(name) {
    let chartName = ""
    switch (name) {
      case "visitorCount":
        chartName = "服务选择页访客数";
        return chartName;
      case "orderVisitorCount":
        chartName = "提单页访客数";
        return chartName;
      case "orderVisitorRatio":
        chartName = "预约-提单页转化率";
        return chartName;
      case "storePayCount":
        chartName = "支付人数";
        return chartName;
      case "storePayRatio":
        chartName = "访客支付转化率";
        return chartName;
      case "storeOrderCount":
        chartName = "支付订单数";
        return chartName;
      case "storePayPrice":
        chartName = "支付金额";
        return chartName;
      case "storePaySinglePrice":
        chartName = "客单价";
        return chartName;
      case "refundCount":
        chartName = "退款订单数";
        return chartName;
      case "refundPrice":
        chartName = "退款金额";
        return chartName;
    }
  }
  //上门服务-概览
  changeNameDataBoardMhc(name) {
    let chartName = ""
    switch (name) {
      case "visitorCount":
        chartName = "服务选择页访客数";
        return chartName;
      case "orderVisitorCount":
        chartName = "提单页访客数";
        return chartName;
      case "orderVisitorRatio":
        chartName = "预约-提单页转化率";
        return chartName;
      case "storePayCount":
        chartName = "支付人数";
        return chartName;
      case "storePayRatio":
        chartName = "访客支付转化率";
        return chartName;
      case "storeOrderCount":
        chartName = "支付订单数";
        return chartName;
      case "storePayPrice":
        chartName = "支付金额";
        return chartName;
      case "storePaySinglePrice":
        chartName = "客单价";
        return chartName;
      case "refundCount":
        chartName = "退款订单数";
        return chartName;
      case "refundPrice":
        chartName = "退款金额";
        return chartName;
    }
  }
  chooseName(name) {
    switch (this.props.name) {
      case "mhc":
        return this.changeNameMhc(name)
      case "dataBoardMhc":
        return this.changeNameDataBoardMhc(name)
      default:
        return this.changeName(name)
    }
  }
  changeName(name) {
    let chartName = ""
    switch (name) {
      case "storeVisitorCount":
        chartName = "访客人数";
        return chartName;
      case "storeCartCount":
        chartName = "加购人数";
        return chartName;
      case "storeCartRatio":
        chartName = "访客加购率";
        return chartName;
      case "storePayCount":
        chartName = "支付人数";
        return chartName;
      case "storePayRatio":
        chartName = "支付转化率";
        return chartName;
      case "storeOrderCount":
        chartName = "支付订单数";
        return chartName;
      case "storePayPrice":
        chartName = "支付金额";
        return chartName;
      case "storePaySinglePrice":
        chartName = "客单价";
        return chartName;
      case "stayDuration":
        chartName = "平均停留时长";
        return chartName;
      case "dynamicViewCount":
        chartName = "查看帖子详情人数";
        return chartName;
      case "dynamicSingleViewCount":
        chartName = "人均查看帖子数";
        return chartName;
      case "dynamicCreateCount":
        chartName = "发帖人数";
        return chartName;
      case "dynamicLikeCount":
        chartName = " 点赞人数";
        return chartName;
      case "dynamicShareCount":
        chartName = "分享人数";
        return chartName;
      case "dynamicCommentCount":
        chartName = "评论人数";
        return chartName;
      case "refundCount":
        chartName = "退款订单数";
        return chartName;
      case "refundPrice":
        chartName = "退款金额";
        return chartName;
    }
  }


  render() {
    const { lineXData, lineYData, legend } = this.state
    return <div className="chart-box">

      <TheLineChart
        ref={this.chart}
        name='平台统计'
        lineXData={lineXData}
        lineYData={lineYData}
        legend={legend}
        theCache={this.theCache}
      />
    </div>
  }
}

export default OnlineIncome;
